<template>
    <div class="container">
        <h4>{{orderInfo.title}}</h4>
        <ul class="ul-flex">
            <li class="li-left">
                <img :src="orderInfo.orderImg" alt=""/>
            </li>
            <li class="li-middle">
                <p>{{orderInfo.content}}</p>
            </li>
            <li class="li-right">
                {{orderInfo.money}}
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        props: {
            orderInfo: {
                type: Object,
                default: () => {
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .container {
        padding: 8px 14px;
        background: #fff;
        border-bottom: 1px solid #f1f1f1;
        h4 {
            height: 42px;
            line-height: 42px;
            font-size: 16px;
            color: #333;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .ul-flex {
            display: flex;
            .li-left {
                flex: 0 0 80px;
                img {
                    width: 68px;
                    height: 68px;
                    border-radius: 3px;
                }
            }
            .li-middle {
                flex: 1;
                font-size: 13px;
                color: #666;
                p {
                    line-height: 32px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                }
            }
            .li-right {
                flex: 0 0 68px;
                align-self: center;
                font-size: 14px;
                color: #0366d6;
                text-align: right;
            }
        }
    }
</style>
